<template>
	<view class="page">
		<view class="top_info">
			<view class="top_info_title">
				{{product_batch_info.product_name}}
			</view>
			<view class="top_info_number">
				编号<text>{{product_batch_info.batch_number}}</text>
			</view>
			<view class="top_info_content">
				{{product_batch_info.batch_name}}<text>></text>
			</view>
		</view>	
		<view class="list_head" v-for="(it,ind) in list" :key="ind">
			<view class="list_top">
				<view class="list_top_left">
					{{it.process_name}}
				</view>
					<u-icon name="arrow-up" v-if="it.status == true" @click="get_status(ind)"></u-icon>
					<u-icon name="arrow-down" v-else  @click="get_status(ind)"></u-icon>
			</view>
			<view v-if="it.status == true">
				<block v-for="(item,index) in it.sheet_list" :key="index">
					<view class="list_item" v-if="item.type == 'text'">
						<view class="list_item_title">
								{{item.key}}：
						</view>
						<view class="list_item_content">
							{{item.value}}
						</view>
					</view>
					<view class="list_item" v-if="item.type == 'textarea'">
						<view class="list_item_title">
							{{item.key}}：
						</view>
						<view class="list_item_content">
							{{item.value}}
						</view>
					</view>
					<view class="list_item" v-if="item.type == 'time'">
						<view class="list_item_title">
							{{item.key}}：
						</view>
						<view class="list_item_content">
							{{item.value}}
						</view>
					</view>
					<view class="list_item" v-if="item.type == 'date'">
						<view class="list_item_title">
							{{item.key}}：
						</view>
						<view class="list_item_content">
							{{item.value}}
						</view>
					</view>
					<view class="list_item" v-if="item.type == 'radio'">
						<view class="list_item_title">
							{{item.key}}：
						</view>
						<view class="list_item_content">
							{{item.value}}
						</view>
					</view>
					<view class="list_item" v-if="item.type == 'checkbox'">
						<view class="list_item_title">
							{{item.key}}：
						</view>
						<view class="list_content_head">
							<view class="list_item_content" style="margin-right: 20rpx;" v-for="(it,ind) in item.value" :key="ind">
								{{it}}
							</view>
						</view>
						
					</view>
					<view class="list_items" v-if="item.type == 'uploadImg'">
						<view class="list_item_titles">
							{{item.key}}：
						</view>
						<view class="list_img_head">
							<view v-for="(e,i) in item.value" :key="i">
								<image @click="previewImage(e)" :src="e" mode=""></image>
							</view>
						</view>
					</view>
					<view class="list_items" v-if="item.type == 'uploadVideo'">
						<view class="list_item_titles">
							{{item.key}}：
						</view>
						<view class="list_img_head">
							<view v-for="(e,i) in item.value" :key="i">
								<video :src="e" :controls="false" :show-fullscreen-btn="false" :show-center-play-btn="false" mode="" @click="get_video(e)"></video>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import source from "../../api/source/index.js";
		export default {
			data() {
				return {
					product_batch_id: 0,
					list: [],
					product_batch_info: {}
				}
			},
			onLoad(e) {
				if (e.product_batch_id) {
					this.product_batch_id = e.product_batch_id;
				}
                if (e.scene) {
                    const query = this.$utils.oneValues(decodeURIComponent(e.scene))
                    if (query.pb_id) {
                        this.product_batch_id = query.pb_id;
                    }
                }
				this.get_product_batch_process_detail();
			},
			methods: {
				get_video(url){
					uni.navigateTo({
						url:'../videoValue/videoValue?url=' + url
					})
				},
				get_status(ind){
					this.list[ind].status = !this.list[ind].status;
				},
				get_product_batch_process_detail() {
					source.product_batch_process_detail({
						product_batch_id: this.product_batch_id
					}).then((res) => {
						if (res.code == 0) {
							this.product_batch_info = res.data.product_batch_info;
							var list = res.data.list;
							for (var i = 0; i < list.length; i++) {
								for (var j = 0; j < list[i].sheet_list.length; j++) {
									if (list[i].sheet_list[j].type == 'checkbox' || list[i].sheet_list[j].type == 'uploadImg' || list[i].sheet_list[j].type ==
										'uploadVideo') {
										list[i].sheet_list[j].value = JSON.parse(list[i].sheet_list[j].value)
									}
								}
								// this.$set(list[i],'status');
								list[i].status = true;
							}
							
							this.list = list;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				},
				previewImage(url) {
					// 预览图片
					var tempFilePaths = [];
					tempFilePaths.push(url)
					uni.previewImage({
						urls: tempFilePaths,
						longPressActions: {
							itemList: ['发送给朋友', '保存图片', '收藏']
						}
					});
				},
				get_show() {
					uni.showActionSheet({
						itemList: ['A', 'B', 'C'],
						cancelColor: '#fff'
					});
				}
			}
		}
	</script>
</script>

<style scoped>
	.list_content_head{
		width: 85%;
		display: flex;
		flex-wrap: wrap; 
	}
	.list_img_head video{
		width: 120rpx;
		height: 120rpx;
		margin-right: 14rpx;
		border-radius: 25rpx;
	}
	.list_img_head image{
		width: 120rpx;
		height: 120rpx;
		margin-right: 14rpx;
		border-radius: 25rpx;
	}
	.list_img_head{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 24rpx;
	}
	.list_item_titles{
		font-size: 26rpx;
		color: #262626;
		padding-bottom: 24rpx;
	}
	.list_items{
		width: 95%;
		margin:0rpx auto;
		
		}
	.list_item_content{
		font-size: 26rpx;
		color: #8C8C8C;
	}
	.list_item_title{
		font-size: 26rpx;
		color: #262626;
	}
	.list_item{
		width: 95%;
		margin:0rpx auto;
		padding-bottom: 24rpx;
		border-bottom:1rpx solid #F8F8F8;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}
	.list_top_left{
		font-size: 30rpx;
		color: #262626;
		font-weight: 600;
	}
	.list_top{
		width: 95%;
		margin:0rpx auto;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.list_head{
		width: 95%;
		margin:24rpx auto;
		border-radius: 25rpx;
		background: #fff;
	}
	/* 列表 */
	.top_info_content text {
		margin-left: 10rpx;
	}
	
	.top_info_content {
		font-size: 26rpx;
		color: #262626;
		margin-left: 30rpx;
		margin-top: 16rpx;
	}
	
	.top_info_number text {
		margin-left: 10rpx;
		color: #F8260A;
	}
	
	.top_info_number {
		font-size: 26rpx;
		color: #262626;
		margin-left: 30rpx;
		margin-top: 16rpx;
	}
	
	.top_info_title {
		font-size: 30rpx;
		color: #000000;
		font-weight: 600;
		margin-left: 30rpx;
	}
	
	.top_info {
		width: 100%;
		background: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding: 30rpx 0;
	}
	
	/* <!-- 分类 --> */
	.page {
		background: rgb(242, 242, 242);
		min-height: 100vh;
		width: 100%;
	}
</style>
